<template>
  <div class="layout">
    <!-- <HmArticle></HmArticle> -->
    <!-- 设置路由出口 -->

    <router-view></router-view>
    <div class="navs">
      <router-link to="/layout/article">
        <div class="div">
          <van-icon name="fire-o" size="18px" />
          <div>面经</div>
        </div>
      </router-link>
      <router-link to="/layout/collect">
        <div class="div">
          <van-icon name="star-o" size="18px" />
          <div>收藏</div>
        </div>
      </router-link>
      <router-link to="/layout/like">
        <div class="div">
          <van-icon name="like-o" size="18px" />
          <div>点赞</div>
        </div>
      </router-link>
      <router-link to="/layout/user">
        <div class="div">
          <van-icon name="friends-o" size="18px" />
          <div>我的</div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
// import HmHeard from "@/components/HmHeard.vue";
// import HmArticle from "./HmArticle.vue";
export default {
  name: "HmLayout",
  components: {
    // HmHeard,
    // HmArticle,
  },
  created() {
    this.$router.push({
      path: "/layout/article",
    });
  },
};
</script>

<style scoped lang="less">
.layout {
  width: 100%;
  height: 50px;

  .navs {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 50px;
    position: fixed;
    left: 0px;
    bottom: 0px;
    background-color: white;

    .div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      color: #504e4e;
    }
  }
}
</style>
